<template>
  <div>

    <el-container>
      <el-header height="90px" width="100%;">
        <div class="home-aside">
          <img src="../../assets/img/logo.png" alt="">
          <span>个人中心</span>
        </div>
        <div class="img-user">

          <el-dropdown @command="handleCommand">
            <img style="cursor:pointer" src="../../assets/img/小黄鸡.png" alt="">
            <el-dropdown-menu slot="dropdown" :split-button="true">
              <el-dropdown-item command="值班前台">值班前台</el-dropdown-item>
              <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <div class="index-content">
          <div class="index-content-title">
            <span>个人中心</span>
          </div>
          <el-form label-width="150px" :rules="formRules" ref="formRef" :model="form">
            <el-form-item label="用户名">
              <el-input v-model="form.user_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="form.department_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="本次值班人员">
              <el-input v-model="form.duty_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="本次值班人员电话">
              <el-input v-model="form.duty_phone" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="修改密码" prop="password">
              <el-input type="password" v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="再次输入" prop="rePassword">
              <el-input type="password" show-password v-model="form.rePassword"></el-input>
            </el-form-item>

            <el-form-item style="text-align:center">
              <el-button @click="alertPassword" type="primary">修改密码</el-button>
              <el-button @click="resetForm('formRef')" style="margin-left:80px;">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      // 自定义“重新输入密码”表单验证规则
      var validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      return {
        num: '1',
        form: {
          user_name: "",
          department_name: "",
          duty_name: "",
          duty_phone: '',
          password: '',
          rePassword: ''
        },
        // 验证规则
        formRules: {
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
            {
              min: 0,
              max: 8,
              message: '长度在 0 到 8 个字符',
              trigger: 'blur'
            },
          ],
          rePassword: [{
            validator: validatePassword,
            trigger: 'blur',
          }]
        }
      }
    },
    created() {
      this.getpersonMessage()
    },
    methods: {
      handleCommand(command) {
        if (command === '值班前台') {
          this.$router.push('/index')
        } else {
          // 清空token 跳转修页面
          window.sessionStorage.clear()
          this.$router.push('/login')
        }
      },
      // 获取个人细信息
      getpersonMessage() {
        this.$http.get('front/getpersoninfo')
          .then(res => {
            if (res.data.code !== 200) return this.$message.error(res.data.msg)
            this.form.user_name = res.data.data.user_name
            this.form.department_name = res.data.data.department_name
            this.form.duty_name = res.data.data.duty_name
            this.form.duty_phone = res.data.data.duty_phone
          }).catch(err => {
            this.$message({
              dangerouslyUseHTMLString: true,
              showClose: true,
              message: err.response.data.data.join('<br>'),
              type: 'error'
            });
          })
      },
      // 修改密码
      alertPassword() {
        this.$refs.formRef.validate(valid => {
          if (!valid) return;
          //  验证通过并，发起请求
          this.$http.post('OAuth/updatepw', {
            new_password: this.form.password
          }).then(res => {
            if (res.data.code !== 200) return this.$message.error(res.data.msg);
            this.$message.success(res.data.msg);
          }).catch(err => {
            this.$message({
              dangerouslyUseHTMLString: true,
              showClose: true,
              message: err.response.data.data.join('<br>'),
              type: 'error'
            });
          })
        })
      },
       // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang='less' scoped>
  .el-header {
    background: #fff;
    z-index: 100;
    box-shadow: 0 5px 7px 0px rgba(0, 0, 0, 0.1);
  }

  .home-aside {
    border-bottom: 3px solid rgba(35, 131, 240, .66);
    margin: 20px 20px 0 20px;
    padding: 0 0 10px 0;
    display: inline-block;
    width: 175px;

    span {
      font-size: 24px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      line-height: 60px;
      vertical-align: top;
      margin-left: 20px;
    }
  }

  .title {
    width: 200px;
    font-size: 14px;
    float: right;
    margin-top: 20px;
    text-align: center;
    line-height: 26px;
  }

  .img-user {
    float: right;
    margin-top: 10px;
    width: 62px;
    height: 62px;
    padding: 8px 13px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
  }

  .el-main {
    background: url('../../assets/img/bg1.png') no-repeat;
    background-size: cover;
    background-position: center;
    height: 847px;
    min-height: 847px;
    position: relative;
  }

  .index-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 590px;
    height: 678px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 11px 16px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;

    .index-content-title {
      width: 590px;
      height: 52px;
      background: rgba(38, 127, 194, 1);
      border-radius: 10px 10px 0px 0px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 24px;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);

      }
    }

    .el-form {
      width: 100%;
      height: 90%;
      margin-top: 40px;
      box-sizing: border-box;
      padding: 0 60px 0 40px;

      .el-form-item {

        margin-bottom: 40px;
      }

    }
  }
</style>